﻿@{
    ViewBag.Title = "Compose";
}

@section ScriptSection
{
    <script type="text/javascript" src='@this.Url.Content("~/Scripts/CKEditor/ckeditor.js")'></script>
    <script type="text/javascript">
        $(function () {
            var css = appPath + 'Content/common.css';
            var config = {
                height: '300px',
                width: '94%',
                entities: 'false',
                contentsCss: css
            };
            var editor = CKEDITOR.replace('PageEditor', config);
            var page = new Page();
            page.editor(editor);
            page.loadJson(@Html.Raw(ViewBag.Json));
            ko.applyBindings(page, document.getElementById("main"));
        });

        
    </script>
}

<div id="main">
    <h1>Compose Page</h1>
    <div class="error" data-bind="html: errorMessage">
    </div>
    <div class="form">
        <div class="left">Title: </div>
        <div class="right">
            <input type="text" data-bind="value: title, valueUpdate: 'afterkeydown', css: { 'errorBox': title.hasError }" />
        </div>
        <div class="clear"></div>
           <div class="left">Include In Header Menu: </div>
        <div class="right">
            <input type="checkbox" data-bind="checked: headerMenu" />
        </div>
        <div class="clear"></div>
        <div>
            Page Contents:
        </div>
        <div>
            <textarea id="PageEditor" data-bind="value: body"></textarea>
        </div>
        <div class="success" data-bind="text: successMessage">
        </div>
        <div style="text-align: center">
            <input type="button" value="Save" data-bind="click: save" />
            <input type="button" value="Publish" data-bind="click: publish" />
            <input type="button" value="Close" data-bind="click: closePage" />
        </div>
    </div>
</div>
